<template>
  <div class="search">
    <div class="srchbg">
      <input
        type="text"
        name="search"
        class="srchinp"
        v-model="keywords"
        @blur="blurHandle"
        @focus="focusHandle"
        @input="inputHandle"
        ref="srchinpRef"
      />
      <label for="search" class="srchlab" @click="clickHandle($event)" ref="srchlabRef"
        >音乐/视频/电台/用户</label
      >
    </div>
    <div class="srchlist" ref="srchlistRef">
      <p class="note">
        <a href="javascript:;" @click.prevent @mousedown="$Message({msg:'功能未开发'})">搜“{{ keywords }}” 相关用户</a> &gt;
      </p>
      <div class="wrap" v-if="searchSuggestObj">
        <div class="item clearfix" v-for="(item, index) in searchSuggestObj.order" :key="index">
          <h3 class="hd f-fl">
            <i class="u-icn f-fl"></i>
            <em class="f-fl">{{ type[item] }}</em>
          </h3>
          <ul class="f-fl" :class="index % 2 ? 'odd' : ''">
            <li v-for="(item2, index) in searchSuggestObj[item]" :key="index">
              <a
                :href="`${item.slice(0, -1)}?id=${item2.id}`"
                class="f-thide"
                v-html="item2.text"
                @click.prevent
                @mousedown="linkTo(`${item.slice(0, -1)}?id=${item2.id}`)"
              ></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { searchSuggest } from '@/api/search.js'
export default {
  data() {
    return {
      // 搜索关键字
      keywords: '',
      // 搜索建议
      searchSuggestObj: null,
      type: {
        songs: '单曲',
        artists: '歌手',
        albums: '专辑',
        playlists: '歌单'
      }
    }
  },
  methods: {
    // label点击事件
    clickHandle(e) {
      e.target.style.display = 'none'
      this.$refs.srchinpRef.focus()
    },
    // 输入框获取焦点
    focusHandle() {
      if (this.keywords.length) {
        this.$refs.srchlistRef.style.display = 'block'
      }
    },
    // 输入框失去焦点
    blurHandle() {
      if (!this.keywords) {
        this.$refs.srchlabRef.style.display = 'block'
      }
      this.$refs.srchlistRef.style.display = 'none'
    },
    // 输入框输入事件
    async inputHandle() {
      // 搜索列表展示
      if (this.keywords.length) {
        this.$refs.srchlistRef.style.display = 'block'
      } else {
        this.$refs.srchlistRef.style.display = 'none'
      }
      const { data } = await searchSuggest(this.keywords)
      this.searchSuggestObj = data.result
      // 处理数据
      for (let key in this.searchSuggestObj) {
        if (key !== 'order') {
          this.searchSuggestObj[key].forEach(item => {
            let art = '-'
            if (item.artists) {
              item.artists.forEach(artist => {
                art += artist.name + ' '
              })
            } else if (item.artist) {
              art += item.artist.name
            } else {
              art = ''
            }
            item.text = item.name + art
            item.text = item.text.replace(
              this.keywords,
              `<span style="color: #0c73c2;">${this.keywords}</span>`
            )
          })
        }
      }
    },
    // 链接跳转
    linkTo(url) {
      this.$router.push(url)
    }
  }
}
</script>

<style lang="less" scoped>
@import './search.less';
</style>
